{% extends "baseUser.html" %}

{% block navbar %}
	{{ super() }}
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) return;
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>
{% endblock %}

{% block userData %}

	<div class="container">
						
			<div class="row">
				
				<div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12">
					<div class="smallstat box">
						<div class="boxchart-overlay blue">
							<div class="boxchartPuntaje">0,0</div>
						</div> 
						<span class="title">Puntaje</span>
						<span class="value" id="puntajeTotales">000</span>
						<span><a href="#" onclick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=Mi puntaje en Entrenate.com &p[url]=http://www.entrenate.com&p[summary]=Entrenate te ayuda a monitorear tu entrenamiento y te da la posibilidad de sumar puntos para adquirir productos, descuentos, etc.&p[images][0]=http://vitafit.com.mx/wp-content/uploads/2012/02/Entrenando-en-Pareja.jpg', 'facebook-share-dialog', 'width=626,height=436'); return false;">
									<img src="static/demo/img/share.jpg" width='64'>
								</a>
						</span>
					</div>
				</div><!--/col-->
				
				<div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12">
					<div class="smallstat box">
						<div class="boxchart-overlay red">
							<div class="boxchartCalorias" >0,0</div>
						</div>	
						<span class="title">Calorias</span>
						<span class="value" id="caloriasTotales">000</span>
						<span><a href="#" onclick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=Entrenate&p[url]=http://www.entrenate.com&p[summary]=Entrenate te ayuda a monitorear tu entrenamiento y te da la posibilidad de sumar puntos para adquirir productos, descuentos, etc.&p[images][0]=http://vitafit.com.mx/wp-content/uploads/2012/02/Entrenando-en-Pareja.jpg', 'facebook-share-dialog', 'width=626,height=436'); return false;">
									<img src="static/demo/img/share.jpg" width='64'>
								</a>
						</span>
					</div>
				</div><!--/col-->
				
				<div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12">
					<div class="smallstat box">
						<i class="icon-download-alt green"></i>
						<span class="title">Amigos</span>
						<span class="value">1 999</span>
						<span><a href="#" onclick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=Tengo 1999 amigos en Entrenate.com&p[url]=http://www.entrenate.com&p[summary]=Entrenate te ayuda a monitorear tu entrenamiento y te da la posibilidad de sumar puntos para adquirir productos, descuentos, etc.&p[images][0]=http://vitafit.com.mx/wp-content/uploads/2012/02/Entrenando-en-Pareja.jpg', 'facebook-share-dialog', 'width=626,height=436'); return false;">
									<img src="static/demo/img/share.jpg" width='64' style='margin-left:3px;'>
								</a>
						</span>
					</div>
				</div><!--/col-->
				
			</div><!--/row-->

			
			<div class="row">
				<div class="box blue">
					<div class="box-header">
						<h2>Consumo de calorias mensuales</h2>
					</div>
					<div id="placeholder" style="height:320px;"></div>
					
					<div id="overview" style="height:100px;"></div>
				</div>	
			</div>
			
			<div class="row">
				<div class="box blue">
					<div class="box-header">
						<h2>Horarios de Entrenamiento</h2>
					</div>
					<div class="chart-horarioPopular" style="height:220px;"></div>
				</div>	
			</div>
			
			<div class="row">
				<div class="box blue">
					<div class="box-header">
						<h2>Deportes</h2>
					</div>
					<div class="tiposDeportes" style="height:320px;"></div>
				</div>	
			</div>
			
			
			<div class="row">
				<div class="box blue">
					<div class="box-header">
						<h2>Calorias consumidas por deportes</h2>
					</div>
					<div class="caloriasDeportes" style="height:320px;"></div>
				</div>	
			</div>
			
			
			<div class="row">	
				
				<div class="col-lg-6 col-sm-6 col-xs-6 col-xxs-12">

					<div class="smallchart blue box">

						<div class="title">Posicion historica</div>

						<div class="content">

							<div class="chart-stat">
								<div class="chart white">5,8,3,9,2,5,6,2,2,5</div>
							</div>

						</div>

						<div class="value">Actual : 10</div>

					</div>

				</div><!--/col-->

				<div class="col-lg-6 col-sm-6 col-xs-6 col-xxs-12">

					<div class="smallchart red box">

						<div class="title">Comparativo General</div>

						<div class="content">

							<div class="chart-stat">
								<div class="chart white">7,3,2,6,6,3,9,0,1,4</div>
							</div>

						</div>

						<div class="value">1 849,99</div>

					</div>

				</div><!--/col-->
				
			</div><!--/row-->	
					
			<div class="row">				
				<div class="col-lg-12">
					<div class="box-header">
						<div class="fb-comments" data-href="http://example.com/comments/user" data-numposts="5" data-width="698"></div>
					</div>
				</div>
			</div>

	</div>

{% endblock %}

{% block js_footer %}
	{{ super() }}

    <script src="/static/xcharts-0.3.0/xcharts.js"></script>
    <script src="/static/d3.v3/d3.v3.js"></script>
    <script src="/static/jquery-extra/jquery.placeholder.min.js"></script>
    <script src="/static/jquery-extra/jquery.autosize.min.js"></script>
    <script src="/static/jquery-extra/jquery.migrate-1.2.1.js"></script>
	<script src="/static/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
	
	<script src="/static/flot/jquery.flot.stack.js"></script>
	<script src="/static/flot/jquery.flot.js"></script>
	<script src="/static/flot/jquery.flot.pie.js"></script>
	<script src="/static/flot/jquery.flot.stack.js"></script>
	<script src="/static/flot/jquery.flot.resize.js"></script>
	<script src="/static/flot/jquery.flot.time.js"></script>
	
	<script src="/static/jquery-extra/core.min.js"></script>

	<script src="/static/jquery-extra/jquery.sparkline.js"></script>

    <script src="http://localhost:7070/socket.io/socket.io.js"></script>
	<script src="/static/demo/dashboardClient.js"></script>
    
{% endblock %}
